import React, { useEffect, useState } from "react";
import "./Message.css";
import { Input, Button } from "antd-mobile";
import useMsg from "../../Hook/useMag";
function Message() {
  const [value, setValue] = useState("");
  const [msgdata, setmagdata] = useState<any>([]);
  const {msg,send} = useMsg("ws://localhost:23456/ws/")
  useEffect(() => {
    if(msg){
        msgdata.push(JSON.parse(msg))
        setmagdata([...msgdata])
    }
  },[msg])
  

  return (
    <div className="msg_box">
        <h2>通知</h2>
      <div className="message">
        <div>
          {msgdata &&
            msgdata.map((item: any) => {
              return (
                <div className="list1">
                    <img src={item.avatar} alt="" />
                    <div className="list1_tsxt">
                        <p className="msg_text">{item.message}</p>
                        <p>{item.time}</p>
                    </div>
                  
                </div>
              );
            })}
        </div>
      </div>
      {/* <div className="input_box">
        <Input
          style={{ background: "#fff" }}
          placeholder="请输入内容"
          value={value}
          onChange={(val) => {
            setValue(val);
          }}
        />
        <Button>发送</Button>
      </div> */}
    </div>
  );
}

export default Message;
